<style>
.source_metrics th {
  font-weight:bold;
  border:0px;
  padding:3px;
  border-bottom: 1px solid #ccc;
  text-align:right;
}
.source_metrics td {
  border:0px;
  padding:3px;
  border-bottom: 1px dotted #ccc;
  text-align:right;
}
</style>

<%= tr8n_actions_tag([
    link_to_function("Add Sources", "Tr8n.UI.Lightbox.show('/tr8n/admin/components/lb_add_objects?type=source&id=#{@comp.id}', {height:450})"),
    link_to_function("Add Languages", "Tr8n.UI.Lightbox.show('/tr8n/admin/components/lb_add_objects?type=language&id=#{@comp.id}', {height:450})"),
    link_to_function("Add Translators", "Tr8n.UI.Lightbox.show('/tr8n/admin/components/lb_add_objects?type=translator&id=#{@comp.id}', {height:450})"),
  ])
%>

<% languages = @comp.languages.sort{|lang1, lang2| lang1.english_name <=> lang2.english_name} %>
<% sources = @comp.sources.sort{|src1, src2| src1.source <=> src2.source} %>

<% if languages.empty? or sources.empty? %>
  <div style="padding:10px 0px;">
    In order to track translation progress of this component, you must 
    <%= link_to_function("assign at least one language", "Tr8n.UI.Lightbox.show('/tr8n/admin/applications/lb_add_objects_to_component?type=language&id=#{@comp.id}', {height:350})") %>
    
    and 
    <%= link_to_function("add at least one source", "Tr8n.UI.Lightbox.show('/tr8n/admin/applications/lb_add_objects_to_component?type=source&id=#{@comp.id}', {height:350})") %>

    to this component. 
  </div>
<% else %>
  <div style="padding-top:10px;padding-bottom:10px;">
    Jump to: <%= languages.collect{|lang| link_to(lang.english_name, params.merge(:show_language=>lang.id, :anchor => "language-#{lang.id}"))}.join(", ").html_safe %>
  </div>

  <% languages.each do |language| 
       metrics = sources.collect{|s| s.total_metric(language)} 
  %>
  <div class="section_box" style="background-color:#FDFFF0; margin-bottom:10px; margin-top:0px;">
    <table>
      <tr>
        <td style="width:20%;text-align:left; padding:10px 0px; font-size:18px; vertical-align:middle;">
          <%=tr8n_toggler_tag("lang_content_#{language.id}", "", params[:show_language] == language.id.to_s)%> 
          <span dir="ltr">
            <a name="<%="language-#{language.id}"%>" style="text-decoration:none;color:black;"><%= tr8n_language_flag_tag(language) %> 
              <%= link_to(language.english_name, params.merge(:show_language=>language.id, :anchor => "language-#{language.id}")) %>
            </a>
          </span>
        </td>
        <td style="text-align:center;width:40%;">
          <center>
            <% 
              percent = metrics.collect{|m| m.translation_completeness}.sum/metrics.count
              if percent < 20
                bgcolor = "#FFD6D6"
              elsif percent < 80
                bgcolor = "#FEFFD6"
              else
                bgcolor = "#D6FFE7"
              end
            %>
            <div style="padding:5px;border:1px dotted #ccc; width:80px; border-radius:10px; background-color:<%=bgcolor%>">
              <div style="font-size:18px;font-weight:bold;">
                <%=percent  %>%
              </div>
              Translated
            </div>
          </center>
        </td>
        <td style="text-align:center;width:40%;">
          <center>
            <% 
              percent = metrics.collect{|m| m.completeness}.sum/metrics.count
              if percent < 20
                bgcolor = "#FFD6D6"
              elsif percent < 80
                bgcolor = "#FEFFD6"
              else
                bgcolor = "#D6FFE7"
              end
            %>
            <div style="padding:5px;border:1px dotted #ccc; width:80px; border-radius:10px; background-color:<%=bgcolor%>">
            <div style="font-size:18px;font-weight:bold;">
              <%=percent  %>%
            </div>
            Locked
            </div>
          </center>
        </td>
      </tr>
    </table>

    <% display = (params[:show_language] == language.id.to_s ? "block" : "none") %>
    <div id="lang_content_<%=language.id%>" class="section_box" style="background:white; display:<%=display%>; border: 1px solid #ccc; margin-top:20px;">
      <% if params[:charts] == "true" %>
        <% sources.each_with_index do |source, index| %>
          <div style="width:380px;  background-color:#efefef; float:left; padding:5px; border-radius:10px; margin:5px; font-size:10px;">
              <div style="padding:5px;">
                  <div style="float:right">
                      <%= tr8n_actions_tag([
                        link_to(image_tag("tr8n/arrow_rotate_clockwise.png"), {:action => :recalculate_source, :source_id => source.id}, {:confirm => "Are you sure you want to recaluclate this source?"})
                        ])
                      %>
                  </div>
                  <div style="font-weight:bold;font-size:12px;"><%= tr8n_language_flag_tag(language) %> <%=link_to(source.title, :action => :source, :source_id => source.id)%></div>
              </div>
              <%=render :partial => "/tr8n/translator/translation_source_metric", :locals => {:translation_source => source, :translation_source_metric => metrics[index]} %>
          </div>
        <% end %>
        <div style="clear:both;"></div>
      <% else %>
        <table class="source_metrics">   
          <tr>
            <th style="text-align:left">Source</th>
            <th>Total Keys</th>
            <th>Translated Keys</th>
            <th>Locked Keys</th>
            <th>% Translated</th>
            <th>% Locked</th>
            <th></th>
          </tr>
          <% sources.each_with_index do |source, index| %>
            <tr>
              <td style="text-align:left">
                <%= link_to(source.name_and_source, :action => :source, :source_id => source.id) %>
              </td>
              <td>
                <%= link_to(metrics[index].key_count, "/tr8n/admin/applications/source?mode=translation_keys&source_id=#{source.id}") %>
              </td>
              <td>
                <%=metrics[index].translated_key_count %>
              </td>
              <td>
                <%=metrics[index].locked_key_count %>
              </td>
              <td>
                <%=metrics[index].translation_completeness %>%
              </td>
              <td>
                <%=metrics[index].completeness %>%
              </td>
              <td>
                <%=link_to(image_tag("tr8n/arrow_rotate_clockwise.png"), {:controller => "/tr8n/admin/sources", :action => :recalculate_source, :source_id => source.id}) %>
              </td>
            </tr>
          <% end %>
        </table>
      <% end %>
    </div>    
  </div>

  <% end %>

<% end %>